.ui-nav-tree .el-tree-node__content{
    height:34px !important;
    position:relative;
    .el-tree-node__expand-icon{
        margin-left:5px;
    }
    &::before{
        content:'≡';
        display:inline-block;
        width:5px;
        color:rgba(#000, .3);
        position:absolute;
        top:6px;
        left:3px;
        visibility:hidden;
    }
    
    &:hover{
        .toolbar{
            visibility:visible;
        }
    }
    .folderIcon{
        position:relative;
        top:2px;
        display:inline-block;
        width:16px;
        height:16px;
        margin-right:3px;
        background:url() center center / 16px 16px no-repeat;
    }
    
}

.ui-tree-menu-filterInput{
    .el-input-group__append {
        padding: 0 10px;
        background-color: transparent;
        .times {
            position: relative;
            left: 2px;
        }
    }
}

.ui-nav-tree{
    &.draggable .el-tree-node__content:hover{
        background:#000;
        &::before{ visibility:visible;}
    }
}
.ui-nav-tree{
    height:100%;
    width:100%;
    padding:0 0 5px;
    display:flex;
    flex-direction:column;
    .fliter-i{
        color:rgba(#25B7D3, .6);
        cursor:pointer;
        width:auto;
        &:hover{
            text-shadow:rgba(#25B7D3, 0.2) 0 2px 6px;
            color:rgba(#25B7D3, 1);
        }
    }
    .root-add{
        color:rgba(#25B7D3, .6);
        cursor:pointer;
        width:auto;
        &:hover{
            box-shadow:rgba(0, 0, 0, 0.2) 0 2px 6px;
            color:rgba(#25B7D3, 1);
        }
        &:active{
            box-shadow:none;
        }
    }
    .outline.icon{
        color:rgba(#000, .3) !important
    }
    .ui-el-tree{
        flex:1;
        overflow:auto;
        &::-webkit-scrollbar{
            width:2px;
        }
        @mixin iconSize(){
            $size:14px;
            width:$size;
            height:$size;
            margin-right:5px;
            display:inline-block;
            background-size:contain;
            background-repeat:no-repeat;
            background-origin:content-box;
        }
        .el-tree-node__content{
            height:40px; //用高度设置导致tree会自定隐藏部分子节点
            // padding: 20px 20px;
            &:hover{
                outline:none;
                background-color:#ecf5ff;
            }
        }
        .el-tree-node__label{
            display:flex;
            align-items:center;
        }
    }
    .arrow{
        transition:.3s;
        font-size:18px;
        &.expanded{
            transform:rotateZ(90deg);
            color:#25B7D3;
        }
    }
    .expand-button{
        padding:0 10px;
        margin-right:2px;
        height:32px;
        transition:.4s;
        &:hover{
            border:1px solid rgba(#409EFF, .2);
        }
    }
    .el-tree-node.is-current > .el-tree-node__content{
        // 节点高亮
        color:#25B7D3;
        background:rgba(#25B7D3, .1);
    }
    .ui-tree-menu-tool{
        height:38px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        background:#eef1f6;
        margin-bottom:5px;
        padding:2px 5px 3px 3px;
        box-shadow:0px 2px 2px rgba(#000, .2);
        position: relative;
        z-index: 1;
        &.transparent{
            background:transparent;
            box-shadow:none;
            border-bottom:1px rgba(#000, .1) solid;
            height:48px;
        }
    }
    
}
.ui-nav-tree .custom-tree-node{
    display:inline-block;
    > div{
        height: 19px;
    }
    .default{
        position: absolute;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    .toolbar {
        visibility: hidden;
        color: rgba(0, 0, 0, .3);
        
        > i:hover {
            color: #25B7D3;
        }
        
        > i.trash:hover {
            color: rgba(#ff3000, .7);
        }
    }
    
}
#ui-tree-menu-mask{
    position:fixed;
    left:0; top:0; width:100%; height:100%; z-index:1000;
    background-color:rgba(28, 29, 31, 0.3);
    > .list-wrapper{
        position:fixed;
        z-index:inherit;
        box-shadow:rgba(0, 0, 0, 0.05) 0 1px 6px -1px, rgba(0, 0, 0, 0.07) 0 5px 24px -2px;
        box-sizing:border-box;
        > .ui.icon.input > i.icon{
            top:1px;
            right:45px;
            z-index:999;
            cursor:pointer;
            &:hover{
                color:#25B7D3;
            }
        }
    }
    > .modal-wrapper{
        box-shadow:rgba(0, 0, 0, 0.05) 0 1px 6px -1px, rgba(0, 0, 0, 0.07) 0 5px 24px -2px;
        position:fixed;
        z-index:inherit;
        box-sizing:border-box;
        background:rgb(255, 255, 255);
        border-radius:3px;
        padding:10px;
        > .ui.icon.input > i.icon{
            top:1px;
            right:45px;
        }
        .modal-wrapper-arrow{
            display:block;
            position:absolute;
            width:10px;
            height:10px;
            transform:rotate(45deg);
            box-shadow:rgba(0, 0, 0, 0.05) 0px 1px 6px -1px, rgba(0, 0, 0, 0.07) 0px 5px 24px -2px;
            background:rgb(255, 255, 255);
            border-radius:2px;
        }
    }
}
